<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'', styles:'bootstrap,font-awesome,animate,style,bootstrap-table,layui-date,auto-complete,dtvalidate'}){%>
    <style type="text/css">
        body{padding-top:10px;}
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        .demo h2{font-size:16px;color:#3366cc;height:30px;}
        .demo li{float:left;}
    </style>
    <%}%>
</head>

<body>
<div class="wrapper wrapper-content">

    <!-- START 数据表格 -->
    <table id="portTable"
           data-toolbar="#toolbar"
           data-side-pagination="server"
           data-pagination="true"
           data-resizable="true"
           data-url="/sea/physical/port/findByCnd.do"
           data-page-size="15"
           class="table table-striped table-hover"
           >
    </table>
    <!-- END 数据表格 -->
</div>

<div id="layer_window" style="display: none;overflow-x: hidden;overflow-y: hidden">
    <input type="hidden" id="portParentId" name="portParentId">
    <input type="hidden" id="portLevel" name="portLevel">

    <!-- START 内容部分 -->
    <div class="container" >
        <form class="form-horizontal" id="info-form" method="post" autocomplete="off" style="margin: auto">
            <div class="form-group" style="margin-top: 20px">
                <label class="port control-label col-sm-2" style="max-width: 100px"></label>
                <div class="col-sm-6" style="max-width: 300px">
                    <input type="text" id="portName" name="portName" class="form-control" >
                </div>
            </div>

            <div class="form-group portWare" style="margin-top: 20px">
                <label class="portWareName control-label col-sm-2" style="max-width: 100px"></label>
                <div class="col-sm-6" style="max-width: 300px">
                    <select  name="portWare" id="portWare" class="form-control">
                        <option value="否" selected>否</option>
                        <option value="是">是</option>
                    </select>
                </div>
            </div>
            <div class="form-group" style="margin-top: 20px">
                <label class="control-label col-sm-7" style="max-width: 100px"></label>
                <button type="button" class="save-btn btn btn-primary">
                    <i class="fa fa-save"></i> 保存
                </button>
            </div>
        </form>
    </div>
    <!-- END 内容部分 -->
</div>
<!-- END 内容部分 -->

<%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,dtvalidate,dtvalidate-lang-zh_cn,bootstrap-table-zh-CN,laydate,layer'}){}%>
<script>
    var $portTable = $('#portTable');
    $(".portWare").hide();
    $(function(){
        //START 表格配置
        $portTable.bootstrapTable({
            pageSize:10,
            detailView: true,
            columns: [
                {
                    title: '国家',
                    field: 'portName',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '国家全称',
                    field: 'portRemark',
                    align: 'center',
                    valign: 'middle'
                },{
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    formatter: optFormatter
                }
            ],
            onLoadSuccess : function(){
                //新增
                $('.add-port-btn').on('click',function(){
                    var id = $(this).attr('data-val');
                    $("#portParentId").val(id);
                    $("#portLevel").val(2);
                    $(".port").html("港口");
                    $(".portWare").hide();
                    layer.open({
                        type:1,
                        title:'新增',
                        area:['600px','300px'],
                        skin:'layui-layer-lan',//layui-layer-molv ;layui-layer-lan;layui-layer-rim;layer-window
                        shadeClose:false,
                        resize: false,
                        scrollbar: false,
                        maxmin: false,//出现最大化按钮
                        content:$('#layer_window')
                    })
                });
            },
            onExpandRow: function (index, row, $detail) {
                InitSubTable(index, row, $detail);
            }
        });
        //END 表格配置
    });

    var cur_table='';
    //初始化子表格(无线循环)
    function InitSubTable (index, row, $detail) {
        var parentId = row.id;
        cur_table = $detail.html('<table id="child_table" class="table table-striped table-hover"></table>').find('table');
        $(cur_table).bootstrapTable({
            url: '/sea/physical/port/findByParenId',
            method: 'get',
            clickToSelect: true,
            queryParams: { id: parentId },
            ajaxOptions: { id: parentId },
            //height: 500,
            uniqueId: "id",
            pageSize: 10,
            pageList: [10, 25],
            detailView: true,
            columns: [
            {
                field: 'portName',
                title: '港口',
                align: 'center'
            },{
                field: 'operate',
                title: '操作',
                align: 'center',
                valign: 'middle',
                formatter: optFormatter2
            }],
            onLoadSuccess : function(){
                //新增
                $('.add-ware-btn').on('click',function(){
                    var id = $(this).attr('data-val');
                    $("#portParentId").val(id);
                    $("#portLevel").val(3);
                    $(".portWareName").html("海外仓");
                    $(".port").html("仓库");
                    $(".portWare").show();
                    layer.open({
                        type:1,
                        title:'新增',
                        area:['600px','300px'],
                        skin:'layui-layer-lan',//layui-layer-molv ;layui-layer-lan;layui-layer-rim;layer-window
                        shadeClose:false,
                        resize: false,
                        scrollbar: false,
                        maxmin: false,//出现最大化按钮
                        content:$('#layer_window')
                    })
                });

                $('.del-port-btn').on('click',function(){
                    var id = $(this).attr('data-val');
                    layer.confirm('确定删除？', {
                        btn: ['确定','取消'],title:'提示'
                    }, function(){
                        $.post('/sea/physical/port/delete.do',{id: id},function(data){
                            if( data.ok ){
                                cur_table.bootstrapTable('refresh');
                                layer.msg(data.msg,{icon: 1,time: 1500});
                            }else{
                                layer.msg(data.msg,{icon: 0,time: 1500});
                            }
                        });
                    });
                });
            },
            onExpandRow: function (index, row, $detail) {
                InitSubTable2(index, row, $detail);
            }
        });
    }
    var cur_table2='';
    function InitSubTable2 (index, row, $detail) {
        var parentId = row.id;
        cur_table2 = $detail.html('<table id="child_table2" class="table table-striped table-hover"></table>').find('table');
        $(cur_table2).bootstrapTable({
            url: '/sea/physical/port/findByParenId',
            method: 'get',
            clickToSelect: true,
            queryParams: { id: parentId },
            ajaxOptions: { id: parentId },
            //height: 500,
            uniqueId: "id",
            pageSize: 10,
            pageList: [10, 25],
            detailView: false,
            columns: [
                {
                    field: 'portName',
                    title: '仓库',
                    align: 'center'
                },{
                    field: 'portWare',
                    title: '海外仓',
                    align: 'center'
                },{
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    formatter: optFormatter3
                }],
            onLoadSuccess : function(){
                $('.del-ware-btn').on('click',function(){
                    var id = $(this).attr('data-val');
                    layer.confirm('确定删除？', {
                        btn: ['确定','取消'],title:'提示'
                    }, function(){
                        $.post('/sea/physical/port/delete.do',{id: id},function(data){
                            if( data.ok ){
                                cur_table2.bootstrapTable('refresh');
                                layer.msg(data.msg,{icon: 1,time: 1500});
                            }else{
                                layer.msg(data.msg,{icon: 0,time: 1500});
                            }
                        });
                    });
                });
            }

        });
    }

    // 操作菜单
    function optFormatter(value,row){
        var content = '<button class="add-port-btn btn btn-xs btn-info" data-val="'+row.id+'" title="添加港口"><i class="fa fa-plus"></i>  </button>';
        return content;
    }

    function optFormatter2(value,row){
        var content = '<button class="add-ware-btn btn btn-xs btn-success" data-val="'+row.id+'" title="添加仓库"><i class="fa fa-plus"></i>  </button>';
        content += '<button class="del-port-btn btn btn-xs btn-danger" data-val="'+row.id+'" title="删除"><i class="fa fa-trash-o"></i>  </button>';
        return content;
    }

    function optFormatter3(value,row){
        var content = '<button class="del-ware-btn btn btn-xs btn-danger" data-val="'+row.id+'" title="删除"><i class="fa fa-trash-o"></i>  </button>';
        return content;
    }

    //提交表单
    $('.save-btn').on('click',function(){
        layer.confirm('确定要新增当前数据？', {
            btn: ['确定','取消'],title:'提示'
        }, function(){
            var portLevel=$("#portLevel").val();
            var portName=$("#portName").val();
            if(portLevel=='2') {
                if (portName == '') {
                    parent.layer.msg('请填写港口信息！', {icon: 0, time: 1500, shade: [0.8, '#393D49']});
                    return;
                }
            }
            if(portLevel=='3'){
                if (portName == '') {
                    parent.layer.msg('请填写仓库信息！', {icon: 0, time: 1500, shade: [0.8, '#393D49']});
                    return;
                }
            }
            layer.closeAll();
            var index=layer.load();
            $.post('/sea/physical/port/save.do',{portParentId:$("#portParentId").val(),portName:portName,portLevel:$("#portLevel").val(),portLevel:$("#portLevel").val(),portWare:$("#portWare").val()},function(data){
                if( data.ok ){
                    if(portLevel=='2') {
                        cur_table.bootstrapTable('refresh');
                    }
                    if(portLevel=='3') {
                        cur_table2.bootstrapTable('refresh');
                    }
                    layer.msg(data.msg,{icon:1,time:1500,shade: [0.8, '#393D49']});
                    layer.close(index);
                }else{
                    layer.msg(data.msg,{icon: 0,time:1500,shade: [0.8, '#393D49']});
                    layer.close(index);
                }
            });
        });
    });

</script>
</body>
</html>
